<template>
	<div>
		<Content>
			<Form :label-width="140">
				<FormItem label="问题标题" required>
					<Input class="view-input" v-model="dataForm.headLines" placeholder="请输入问题标题"></Input>
				</FormItem>
				<FormItem label="问题分类" required>
					<Select class="view-input" placeholder="选择分类" v-model="dataForm.channelId">
						<Option v-for="(item,id) in newChannels" :value="item.channelId" :key="id">{{item.channelName}}</Option>
					</Select>
				</FormItem>
				<FormItem label="内容摘要">
					<Input class="view-input" v-model="dataForm.contentSummary" placeholder="请输入内容摘要" type="textarea" :autosize="{minRows: 2,maxRows: 5}"></Input>
				</FormItem>
				<FormItem label="问题图片">
					<div class="demo-upload-list" v-for="(item,id) in uploadFiles" :key="id">
						<template v-if="item.status === 'finished'">
							<img :src="item.src" alt="img">
							<div class="demo-upload-list-cover">
								<Icon type="ios-eye-outline" @click.native="preview(item.src)" title="预览"></Icon>
								<Icon type="ios-trash-outline" @click.native="remove(id)" title="删除"></Icon>
							</div>
						</template>
						<template v-else>
							<Progress v-if="item.showProgress" :percent="item.percentage" hide-info></Progress>
						</template>
					</div>
					<Upload ref="upload_module"
						:show-upload-list="false"
						:on-success="onSuccess"
						:format="['jpg','jpeg','png']"
						:max-size="4096"
						:on-format-error="uploadExt"
						:on-exceeded-size="uploadSize"
						type="drag"
						name="binaryFile"
						:headers="uploadHeader"
						:data="uploadParam"
						:action="uploadApi"
						style="display: inline-block;width:58px;">
						<div style="width: 58px;height:58px;line-height: 58px;">
							<Icon type="ios-camera" size="20"></Icon>
						</div>
					</Upload>
				</FormItem>
			</Form>
			<Form :label-width="140" inline>
				<FormItem label="引用来源">
					<Input placeholder="from" style="width: 180px" v-model="dataForm.newsSources"/>
				</FormItem>
				<FormItem label="外链地址">
					<Input placeholder="url" style="width: 340px" v-model="dataForm.referLinks" />
				</FormItem>
				<FormItem label="内容提供者">
					<Input placeholder="author" style="width: 180px" v-model="dataForm.contentProvider" />
				</FormItem>
				<FormItem label="排序">
					<Input placeholder="99" style="width: 100px"  v-model.number="dataForm.sortIndex"/>
				</FormItem>
			</Form>
			<Form>
				<article id="updateEditor" style="margin:30px 0 30px 140px"></article>
				<FormItem style="text-align:center">
					<Button type="default" @click="Save">保存草稿</Button>
					<Button type="primary" @click="Release">发布</Button>
				</FormItem>
			</Form>
		</Content>
	</div>
</template>
<script>
import Editor from 'wangeditor'
export default {
	name: "newUpdate",
	props: {
		callbank: Function
	},
	data() {
		return {
			newChannels: [],
			uploadFiles: [],
			uploadApi: `${env_config.upload_config.api}/agrobiz-file/v1.0/upload/single/file/binary`,
			uploadHeader: {
				'Authorization': 'Bearer ' + this.$store.getToken()
			},
			uploadParam: {
				catalog:'news'
			},
			dataForm: {},
			channelOption: 0,
			editor: null
		}
	},
	methods: {
		Init(id){
			this.getChannels()
			this.getContent(id)
		},
		getContent(id) {
			new this.$rest({
				service: 'agrobiz-msg',
				 gateway: 'agrobiz',
				url: '/v1.0/news/content/id',
				query: {
					equal: id
				},
				action: (res)=>{
					if(res.data.code === 20000){
						const data = res.data.data
						this.dataForm = data
						this.$nextTick(()=>{
							if(data.articleContent){
								this.editor.txt.html(data.articleContent)
							}
						})
					} else {
						this.$Notice.warning({
							title: '获取失败',
							desc: `失败原因：${res.data.msg}`
						})
					}
				}
			}).get()
		},
		getChannels(){
			new this.$rest({
				service: 'agrobiz-msg',
				 gateway: 'agrobiz',
				url: '/v1.0/news/channel/page',
				query: {
					equal:{
						channelType: 3
					},
					pageIndex: 1,
          pageSize: 21,
          orderBy:{
            asc: true,
            fields: ['sort_index']
          }
				},
				action: (res)=>{
					if(res.data.code === 20000){
						const data = res.data.data
						this.newChannels = data.list
					} else {
						this.$Notice.warning({
							title: '获取失败',
							desc: `失败原因：${res.data.msg}`
						})
					}
				}
			}).get()
		},
		Save() {
			this.Submit(0)
		},
		Release() {
			this.Submit(1)
		},
		Submit(status) {
			if(this.uploadFiles[0]) {
				this.dataForm.newsImage = this.uploadFiles[0].src
			}
			this.newChannels.forEach(element => {
				if(element.channelId === this.dataForm.channelId) {
					this.dataForm.channelType = element.channelType
					this.dataForm.channelName = element.channelName
				}
			})
			
			this.dataForm.releaseStatus = status
			this.dataForm.articleContent = this.editor.txt.html()
			if(!this.dataForm.articleContent) {
				this.$Message.warning({
					title: '温馨提示',
					content: '内容不能为空'
				})
				return false
			}
			new this.$rest({
				service: "agrobiz-msg",
				gateway: 'agrobiz',
				url: '/v1.0/news/content',
				data: {
					pojo: this.dataForm,
				},
				action: (res) => {
					if (res.data.code === 20000) {
						this.callbank()
					} else {
						this.$Notice.warning({
							title: "操作失败",
							desc: `失败原因：${res.data.msg}`,
						})
					}
				}
			}).put()
		},
		preview(src) {
			this.$Modal.info({
				content: `<img style="width:100%" src="${src}">`,
				width: '500px',
			})
		},
		remove(id) {
			this.uploadFiles.splice(id, 1)
		},
		onSuccess(response, file, fileList) {
			if(response.code === 20000){
				fileList.forEach(element => {
					element.src = element.response.data.protocol + element.response.data.hostName + element.response.data.filePath
				})
			} else {
				this.$Notice.warning({
					title: '上传失败',
					desc: `失败原因：${response.msg}`
				})
			}
		},
		uploadExt(file) {
			this.$Notice.warning({
				title: '图片格式不支持',
				desc: `${file.name}图片格式不支持，请使用jpg、jpeg、png`
			})
		},
		uploadSize(file) {
			this.$Notice.warning({
				title: '图片过大',
				desc: `${file.name}图片大小不能超过2M`
			})
		}
	},
	created(){
		
	},
	mounted() {
		this.$nextTick(()=>{
			this.uploadFiles = this.$refs.upload_module.fileList
		})

		//初始化富文本编辑器
		this.editor = new Editor('#updateEditor')
		this.editor.config.height = 800
		this.editor.config.placeholder = '商品详情介绍'
		this.editor.config.uploadImgServer = `${env_config.upload_config.api}/agrobiz-file/v1.0/upload/single/file/binary`
		this.editor.config.uploadImgMaxSize = 2 * 1024 * 1024
		this.editor.config.uploadImgMaxLength = 1
		this.editor.config.uploadFileName = 'binaryFile'
		this.editor.config.uploadImgParams = {
			catalog:'news',
			selfName: false
		}
		this.editor.config.uploadImgHeaders = {
			'Authorization': 'Bearer ' + this.$store.getToken()
		}
		this.editor.config.uploadImgHooks = {
			success: (xhr)=>{
				console.log('图片插入成功',xhr)
			},
			fail: (xhr, editor, resData)=>{
				console.log('fail', resData)
				this.$Message.error('图片插入时出错')
			},
			error: (xhr, editor, resData)=>{
				console.log('error', xhr, resData)
				this.$Message.error('http请求异常')
			},
			timeout: (xhr)=>{
				console.log('timeout')
				this.$Message.error('上传超时')
			},
			customInsert: (insertImgFn, result)=>{
				console.log('result ->',result)
				if(result.code === 20000){
					insertImgFn(result.data.protocol + result.data.hostName+ result.data.filePath)
				} else {
					this.$Notice.error({
						title: '上传失败',
						desc: `原因：${result.msg}`
					})
				}
			}
		}
		this.editor.create()
	}
}
</script>
<style lang="less" scoped>
table{
	th {
    border: 1px solid #ccc;
    min-width: 50px;
    height: 20px;
        background-color: yellow;
    }
}

h1 {
	background-color: #f5f5f5; font-size: 18px;
	padding: 10px;
	color: #333;
	margin-bottom: 18px;
}

.vertical-center-modal {
	display: flex;
	align-items: center;
	justify-content: center;
}

.demo-upload-list {
	display: inline-block;
	width: 60px;
	height: 60px;
	background: #fff;
	position: relative;
	margin-right: 4px;
}

.demo-upload-list img {
	width: 100%;
	height: 100%;
	border-radius: 4px;
	box-shadow: 0 1px 1px rgba(0, 0, 0, .2);
}

.demo-upload-list-cover {
	display: none;
	position: absolute;
	top: 0;
	bottom: 0;
	left: 0;
	right: 0;
	background: rgba(0, 0, 0, .6);
}

.demo-upload-list:hover .demo-upload-list-cover {
	display: block;
}

.demo-upload-list-cover i {
	color: #fff;
	font-size: 20px;
	cursor: pointer;
	margin: 0 2px;
}

.intro-con {
	min-height: 140px;
}

.draggable-btn {
	margin-top: 20px;
}

.code-con {
	width: 400px;
	background: #F9F9F9;
	padding-top: 10px;
}

.goods-type div.box-in {
	border: 1px solid #d9c9c6;
	text-align: center;
	cursor: pointer;
	height: 60px;
	position: relative;
}

.goods-type div.box-in>img {
	width: 25%;
	height: 50%;
	position: absolute;
	bottom: 0;
	right: 0;
}

.view-input {
	width: 50%;
}

.category-params {
	background-color: #f5f5f5;
	padding: 10px;
}

.button-addSpec {
	width: 98%;
	background-color: #f5f5f5;
	margin: 10px auto;
	padding: 8px;
}
.spec-item {
	display: inline-block; vertical-align: top; position: relative;
}
.have-img {
	height: 110px;
}
.spec-item:hover .del-spec {
	display: block;
}
.spec-item .del-spec {
	position: absolute; top: -8px; right: 0; width: 20px; z-index: 99; opacity: .5; display: none; cursor: pointer;
}
.spec-item .ivu-upload {
	position: absolute; top: 40px; left: 22px;
}
.spec-img {
	margin-top: 5px;
}
.spec-img>img {
	width: 100px; height: 80px; border-radius: 5px; border: 2px solid #FFFFFF;
}
.spec-img>img:hover {
	box-shadow: 0 0 7px #00000050;
}
footer {
	position: fixed; width: auto; bottom: 25px; left: 200px; right: 0; text-align: center; z-index: 999999;
}

th .ivu-table-cell {
	white-space: nowrap;
}
.ivu-table-cell {
	white-space: nowrap;
}
</style>
